{% extends 'system_template/public/base_main.html' %}
{% block cite %}
    数据可视化(实时)
{% endblock %}
{% block reload %}
{% endblock %}
{% block content %}
    <script type="text/javascript" src="{{ url_for('static',filename='js/echarts.min.js') }}"></script>
    <div class="layui-tab layui-tab-brief" data-id="1" id="par" style="margin: 0;margin-top: -15px;">
        <ul class="layui-tab-title">
            <li class="layui-this">订单收益</li>
            <li>用户访问</li>
            <li>七牛云存储</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show" id="content_1" style="width:100%; height:500%;">数据加载中...</div>
            <div class="layui-tab-item" id="content_2" style="width:100%; height:500%;">数据加载中...</div>
            <div class="layui-tab-item" id="content_3" style="width:100%; height:500%;"></div>
        </div>
    </div>
{% endblock %}
{% block footer %}
    <script>
        $(function () {
                content_1();
                par_ele = $('#par');
                $('ul[class="layui-tab-title"]>li:eq(0)').on('click', function () {
                    par_ele.attr('data-id', '1');
                });
                $('ul[class="layui-tab-title"]>li:eq(1)').on('click', function () {
                    par_ele.attr('data-id', '2');
                });
                $('ul[class="layui-tab-title"]>li:eq(2)').on('click', function () {
                    par_ele.attr('data-id', '3');
                    layer.open({
                        title:'TL系统提示',
                        content: '七牛云存储频率统计开发中,敬请期待...',
                        scrollbar: false
                    });
                });
                setInterval(fetchData, 5000);
            }
        );

        function fetchData() {
            val = $('#par').attr('data-id');
            if (val === '1') {
                content_1();
            } else if (val === '2') {
                content_2()// 用户访问
            }
        }

        function content_1() {
            var chart = echarts.init(document.getElementById('content_1'), 'white', {renderer: 'canvas'});
            $.ajax({
                type: "GET",
                url: "{{ url_for('sys_bp.order_pay_chart') }}",
                dataType: 'json',
                success: function (result) {
                    chart.setOption(result);
                }
            });
        }

        function content_2() {
            var chart = echarts.init(document.getElementById('content_2'), 'white', {renderer: 'canvas'});
            $.ajax({
                type: "GET",
                url: "{{ url_for('sys_bp.visit_user_chart') }}",
                dataType: 'json',
                success: function (result) {
                    chart.setOption(result);
                }
            });
        }
    </script>
{% endblock %}